<template>
    <view class="chat-container">
        <!-- 导航栏 -->
        <uv-navbar title="" :border="false" :autoBack="true" :placeholder="true" leftIcon="arrow-left"
            :titleStyle="{ color: '#333' }">
            <template #center>
                <view class="nav-title">AI学习助手</view>
            </template>
        </uv-navbar>

        <!-- 聊天内容区域 -->
        <scroll-view class="chat-content" :scroll-top="scrollTop" scroll-y="true" :show-scrollbar="false">
            <view class="message-list">
                <!-- 欢迎消息 -->
                <view class="message-item ai-message" v-if="messages.length === 0">
                    <view class="avatar ai-avatar">
                        <image src="https://cdn-icons-png.flaticon.com/512/4712/4712027.png" mode="aspectFit" />
                    </view>
                    <view class="message-content">
                        <view class="message-bubble ai-bubble">
                            <text>你好！我是你的AI学习助手。基于你刚才的考试结果，我可以为你提供个性化的学习建议。你有什么想了解的吗？</text>
                        </view>
                        <view class="message-time">{{ formatCurrentTime() }}</view>
                    </view>
                </view>

                <!-- 消息列表 -->
                <view class="message-item" v-for="(item, index) in messages" :key="index"
                    :class="item.type === 'user' ? 'user-message' : 'ai-message'">
                    <view class="avatar" :class="item.type === 'user' ? 'user-avatar' : 'ai-avatar'">
                        <image v-if="item.type === 'user'" src="https://cdn-icons-png.flaticon.com/512/3135/3135715.png"
                            mode="aspectFit" />
                        <image v-else src="https://cdn-icons-png.flaticon.com/512/4712/4712027.png" mode="aspectFit" />
                    </view>
                    <view class="message-content">
                        <view class="message-bubble" :class="item.type === 'user' ? 'user-bubble' : 'ai-bubble'">
                            <!-- 用户消息使用普通文本 -->
                            <text v-if="item.type === 'user'">{{ item.content }}</text>
                            <!-- AI消息使用Markdown渲染 -->
                            <ua-markdown v-else :source="item.content" class="ai-markdown-content" />
                            <view v-if="item.isStreaming" class="streaming-cursor"></view>
                        </view>
                        <view class="message-time">{{ item.time }}</view>
                    </view>
                </view>

                <!-- AI正在输入 -->
                <view class="message-item ai-message" v-if="isAiTyping">
                    <view class="avatar ai-avatar">
                        <image src="https://cdn-icons-png.flaticon.com/512/4712/4712027.png" mode="aspectFit" />
                    </view>
                    <view class="message-content">
                        <view class="message-bubble ai-bubble typing-bubble">
                            <view class="typing-dots">
                                <view class="dot"></view>
                                <view class="dot"></view>
                                <view class="dot"></view>
                            </view>
                        </view>
                    </view>
                </view>
            </view>
        </scroll-view>

        <!-- 快捷建议按钮 -->
        <view class="quick-suggestions" v-if="suggestions.length > 0">
            <scroll-view class="suggestions-scroll" scroll-x="true" :show-scrollbar="false">
                <view class="suggestion-list">
                    <view class="suggestion-item" v-for="(item, index) in suggestions" :key="index"
                        @click="sendSuggestion(item)">
                        <text>{{ item }}</text>
                    </view>
                </view>
            </scroll-view>
        </view>

        <!-- 输入区域 -->
        <view class="input-area">
            <view class="input-container">
                <input class="message-input" v-model="inputText" placeholder="输入你的问题..." maxlength="500"
                    confirm-type="send" @confirm="sendMessage" />
                <view class="send-btn" :class="{ active: inputText.trim() }" @click="sendMessage">
                    <image src="https://cdn-icons-png.flaticon.com/512/3682/3682321.png" mode="aspectFit" />
                </view>
            </view>
        </view>
    </view>
</template>

<script>
import uaMarkdown from '@/components/ua2-markdown/ua-markdown.vue'

export default {
    components: {
        uaMarkdown
    },
    data() {
        return {
            examId: '',
            context: '',
            examContext: null, // 存储考试上下文数据
            inputText: '',
            messages: [],
            scrollTop: 0,
            isAiTyping: false,
            suggestions: [
                '如何提高我的薄弱环节？',
                '推荐相关学习资料',
                '分析我的学习方法',
                '制定复习计划',
                '解释错题知识点'
            ]
        }
    },
    onLoad(options) {
        if (options.examId) {
            this.examId = options.examId;
        }
        if (options.context) {
            this.context = options.context;
        }

        // 如果是从考试结果页面进入，加载相关上下文
        if (this.context === 'exam_result') {
            this.loadExamContext();
        }
    },
    onReady() {
        // 滚动到底部
        this.scrollToBottom();
    },
    methods: {
        // 加载考试上下文
        async loadExamContext() {
            try {
                // 从本地存储或API获取考试结果数据
                if (this.examId) {
                    const response = await this.$api('getExamResult', { userExamID: this.examId });
                    if (response.code === 200) {
                        this.examContext = response.data;
                        console.log('加载考试上下文成功:', this.examContext);
                    }
                }
            } catch (error) {
                console.error('加载考试上下文失败:', error);
            }
        },

        // 发送消息
        sendMessage() {
            if (!this.inputText.trim()) return;

            const userMessage = {
                type: 'user',
                content: this.inputText.trim(),
                time: this.formatCurrentTime()
            };

            this.messages.push(userMessage);
            this.scrollToBottom();

            // 调用真实AI服务
            this.sendMessageToAI(userMessage.content);

            // 清空输入框
            this.inputText = '';
        },

        // 发送建议
        sendSuggestion(suggestion) {
            this.inputText = suggestion;
            this.sendMessage();
        },

        // 流式AI回复
        async sendMessageToAI(userInput) {
            this.isAiTyping = true;
            this.scrollToBottom();

            // 隐藏建议按钮
            this.suggestions = [];

            // 创建一个新的AI消息对象，先显示空内容
            const aiMessage = {
                type: 'ai',
                content: '',
                time: this.formatCurrentTime(),
                isStreaming: true
            };

            this.messages.push(aiMessage);
            const messageIndex = this.messages.length - 1;

            try {
                // 构建请求数据
                const requestData = {
                    messages: [
                        ...this.messages.slice(0, -1).map(msg => ({
                            role: msg.type === 'user' ? 'user' : 'assistant',
                            content: msg.content
                        })),
                        {
                            role: 'user',
                            content: userInput
                        }
                    ],
                    exam_context: this.examContext || null,
                    user_exam_id: this.examId || null,
                    stream: true
                };

                // 构建API URL，包含examId参数
                let apiUrl = `${this.$config.agentUrl}/api/v1/chat/stream`;
                if (this.examId) {
                    apiUrl += `?examId=${this.examId}`;
                }

                // 使用fetch直接调用流式API
                const response = await fetch(apiUrl, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'Authorization': `Bearer ${uni.getStorageSync('token') || ''}`,
                        'clientid': uni.getStorageSync('clientid') || '',
                        'user-agent': navigator.userAgent || ''
                    },
                    body: JSON.stringify(requestData)
                });

                if (!response.ok) {
                    throw new Error(`HTTP ${response.status}: ${response.statusText}`);
                }

                const reader = response.body.getReader();
                const decoder = new TextDecoder();
                let buffer = '';

                while (true) {
                    const { done, value } = await reader.read();

                    if (done) break;

                    // 解码数据流
                    buffer += decoder.decode(value, { stream: true });

                    // 处理可能的多行数据
                    const lines = buffer.split('\n');
                    buffer = lines.pop() || ''; // 保留最后可能不完整的行

                    for (const line of lines) {
                        if (line.startsWith('data: ')) {
                            try {
                                const data = JSON.parse(line.slice(6));

                                if (data.error) {
                                    throw new Error(data.error);
                                }

                                if (data.done) {
                                    // 流式传输完成
                                    this.isAiTyping = false;
                                    this.messages[messageIndex].isStreaming = false;

                                    // 重新显示建议按钮
                                    setTimeout(() => {
                                        this.suggestions = [
                                            '需要更详细的解释',
                                            '推荐其他学习方法',
                                            '制定具体时间安排',
                                            '分析其他题型'
                                        ];
                                    }, 500);
                                    break;
                                }

                                if (data.content) {
                                    // 累积内容
                                    this.messages[messageIndex].content += data.content;
                                    this.scrollToBottom();
                                }

                            } catch (parseError) {
                                console.warn('解析SSE数据失败:', parseError);
                            }
                        }
                    }
                }

            } catch (error) {
                console.error('AI流式聊天错误:', error);
                this.isAiTyping = false;

                // 如果流式失败，回退到普通API
                console.log('尝试使用普通API...');
                await this.fallbackToNormalAPI(userInput, messageIndex);
            }
        },

        // 回退到普通API的方法
        async fallbackToNormalAPI(userInput, messageIndex) {
            try {
                const requestData = {
                    messages: [
                        ...this.messages.slice(0, -1).map(msg => ({
                            role: msg.type === 'user' ? 'user' : 'assistant',
                            content: msg.content
                        })),
                        {
                            role: 'user',
                            content: userInput
                        }
                    ],
                    exam_context: this.examContext || null,
                    stream: false
                };

                // 构建API URL，包含examId参数
                let apiUrl = `${this.$config.agentUrl}/api/v1/chat/message`;
                if (this.examId) {
                    apiUrl += `?examId=${this.examId}`;
                }

                // 使用fetch调用普通API
                const response = await fetch(apiUrl, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'Authorization': `Bearer ${uni.getStorageSync('token') || ''}`,
                        'clientid': uni.getStorageSync('clientid') || '',
                        'user-agent': navigator.userAgent || ''
                    },
                    body: JSON.stringify(requestData)
                });

                const result = await response.json();
                
                if (result.code === 200) {
                    this.messages[messageIndex].content = result.content;
                    this.messages[messageIndex].isStreaming = false;
                } else {
                    throw new Error(result.msg || 'AI服务错误');
                }

            } catch (error) {
                console.error('普通API也失败:', error);
                
                // 使用备用回复
                this.messages[messageIndex].content = this.getFallbackResponse(userInput);
                this.messages[messageIndex].isStreaming = false;
            }

            // 重新显示建议按钮
            setTimeout(() => {
                this.suggestions = [
                    '需要更详细的解释',
                    '推荐其他学习方法',
                    '制定具体时间安排',
                    '分析其他题型'
                ];
            }, 1000);
        },        // 备用回复方法
        getFallbackResponse(userInput) {
            const fallbackResponses = {
                "薄弱环节": `## 薄弱环节改进建议 💪

基于一般的学习经验，我建议你：

1. **回顾错题**，分析出错原因
2. **针对薄弱知识点**进行专项练习
3. **寻求老师或同学的帮助**
4. **制定规律的复习计划**

> 学习是一个持续的过程，保持耐心和坚持很重要！💪`,

                "学习资料": `## 学习资源推荐 📖

我推荐以下学习资源：

- 📚 **教科书和参考书**
- 🎥 **在线课程**（如慕课、网易云课堂）
- 📝 **练习题库和模拟考试**
- 👥 **学习小组或论坛交流**

> 选择适合自己学习风格的资料最重要！📖`,

                "复习计划": `## 复习计划建议 ⏰

制定有效的复习计划建议：

1. ⏰ **合理安排时间**，避免临时抱佛脚
2. 🎯 **明确每天的学习目标**
3. 📊 **定期检查学习进度**
4. 🔄 **及时调整学习策略**

> 记住，计划要切实可行，循序渐进！✨`
            };

            // 根据用户输入匹配合适的回复
            for (const keyword in fallbackResponses) {
                if (userInput.includes(keyword)) {
                    return fallbackResponses[keyword];
                }
            }

            return `## 温馨提示 😊

很抱歉，AI服务暂时不可用。建议你：

1. **回顾刚才的考试错题**
2. **针对错误较多的知识点进行复习**
3. **咨询老师或同学获得帮助**

> 如果有具体的学习问题，欢迎稍后再试！😊`;
        },

        // 模拟AI回复（保留作为备用）
        simulateAiReply(userInput) {
            this.isAiTyping = true;
            this.scrollToBottom();

            // 隐藏建议按钮
            this.suggestions = [];

            setTimeout(() => {
                this.isAiTyping = false;

                let aiResponse = '';

                // 根据用户输入生成不同的回复
                if (userInput.includes('薄弱环节') || userInput.includes('提高')) {
                    aiResponse = `## 考试分析结果 📊

根据你的考试结果分析，你在**填空题**和**多选题**方面还有提升空间。

### 改进建议

1. **填空题**：多做基础概念的练习
2. **多选题**：仔细审题，避免遗漏选项  
3. **刷题训练**：通过大量练习来熟悉题型

> 💡 需要我为你推荐具体的学习资料吗？`;

                } else if (userInput.includes('学习资料') || userInput.includes('推荐')) {
                    aiResponse = `## 学习资料推荐 📚

基于你的学习情况，我为你推荐以下资料：

### 基础教材
- 📚 **《计算机系统概论》** - 系统性学习基础概念

### 在线课程  
- 🎥 **网易云课堂相关课程** - 视频讲解更直观

### 练习平台
- 📝 **LeetCode、牛客网** - 大量练习题目

### 参考书籍
- 📖 **《深入理解计算机系统》** - 深入学习系统原理

> 这些资料可以帮助你系统性地提升薄弱环节。`;

                } else if (userInput.includes('学习方法') || userInput.includes('方法')) {
                    aiResponse = `## 学习方法建议 🎯

根据你的答题表现，建议采用以下学习方法：

### 推荐方法
1. 🎯 **主动学习法** - 不要只是被动接受知识
2. 📝 **费曼学习法** - 尝试向别人解释概念  
3. 🔄 **间隔重复** - 定期复习已学内容
4. 💡 **思维导图** - 梳理知识点之间的联系

> 你觉得哪种方法比较适合你？`;

                } else if (userInput.includes('复习计划') || userInput.includes('计划')) {
                    aiResponse = `## 个性化复习计划 📅

为你制定以下复习计划：

### 第1-2周：巩固基础概念
- 每天1小时理论学习
- 重点复习计算机系统结构

### 第3-4周：专项练习  
- 填空题专项训练
- 多选题技巧提升

### 第5-6周：综合提升
- 模拟考试练习
- 错题回顾总结

> 需要我详细解释某个阶段吗？`;

                } else {
                    aiResponse = `## 学习指导 💪

我理解你的问题。基于你的考试表现，我建议你可以从以下几个方面入手：

### 改进步骤
1. **回顾错题** - 理解出错原因
2. **强化薄弱知识点** - 针对性学习
3. **多做相似题型** - 提高熟练度

> 你还有其他具体想了解的问题吗？我可以为你提供更详细的指导。`;
                }

                const aiMessage = {
                    type: 'ai',
                    content: aiResponse,
                    time: this.formatCurrentTime()
                };

                this.messages.push(aiMessage);
                this.scrollToBottom();

                // 重新显示建议按钮
                setTimeout(() => {
                    this.suggestions = [
                        '需要更详细的解释',
                        '推荐其他学习方法',
                        '制定具体时间安排',
                        '分析其他题型'
                    ];
                }, 1000);

            }, 1500 + Math.random() * 1000); // 随机延迟模拟真实对话
        },

        // 滚动到底部
        scrollToBottom() {
            this.$nextTick(() => {
                setTimeout(() => {
                    this.scrollTop = 99999;
                }, 100);
            });
        },

        // 格式化当前时间
        formatCurrentTime() {
            const now = new Date();
            const hours = String(now.getHours()).padStart(2, '0');
            const minutes = String(now.getMinutes()).padStart(2, '0');
            return `${hours}:${minutes}`;
        }
    }
}
</script>

<style lang="scss" scoped>
.chat-container {
    height: 100vh;
    display: flex;
    flex-direction: column;
    background-color: #f5f5f5;
}

.nav-title {
    font-size: 32rpx;
    font-weight: 500;
    color: #333;
}

.chat-content {
    flex: 1;
    padding: 20rpx 0;
}

.message-list {
    padding: 0 30rpx;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow-x: hidden; /* 防止水平滚动 */
}

.message-item {
    display: flex;
    margin-bottom: 30rpx;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    align-items: flex-start;

    &.user-message {
        flex-direction: row-reverse;

        .message-content {
            align-items: flex-end;
        }

        .message-time {
            text-align: right;
        }
    }

    &.ai-message {
        flex-direction: row;

        .message-content {
            align-items: flex-start;
        }

        .message-time {
            text-align: left;
        }
    }
}

.avatar {
    width: 80rpx;
    height: 80rpx;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;

    &.user-avatar {
        margin-left: 20rpx;
        background-color: #1890ff;
    }

    &.ai-avatar {
        margin-right: 20rpx;
        background-color: #722ed1;
    }

    image {
        width: 100%;
        height: 100%;
    }
}

.message-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    max-width: calc(100% - 100rpx); /* 减去头像(80rpx)和间距(20rpx)的宽度 */
    min-width: 0; /* 确保flex子项可以收缩 */
    box-sizing: border-box;
}

.message-bubble {
    padding: 24rpx 30rpx;
    border-radius: 20rpx;
    margin-bottom: 10rpx;
    line-height: 1.5;
    font-size: 28rpx;
    word-wrap: break-word;
    white-space: pre-wrap;
    overflow-wrap: break-word;
    max-width: 100%;
    box-sizing: border-box;

    &.user-bubble {
        background-color: #1890ff;
        color: #fff;
        border-bottom-right-radius: 8rpx;
    }

    &.ai-bubble {
        background-color: #fff;
        color: #333;
        border: 2rpx solid #e8e8e8;
        border-bottom-left-radius: 8rpx;
    }

    &.typing-bubble {
        padding: 30rpx;
        display: flex;
        justify-content: center;
        align-items: center;
    }
}

.message-time {
    font-size: 22rpx;
    color: #999;
    margin: 0 30rpx;
}

.typing-dots {
    display: flex;
    gap: 8rpx;

    .dot {
        width: 12rpx;
        height: 12rpx;
        border-radius: 50%;
        background-color: #999;
        animation: typing 1.4s infinite ease-in-out;

        &:nth-child(2) {
            animation-delay: 0.2s;
        }

        &:nth-child(3) {
            animation-delay: 0.4s;
        }
    }
}

@keyframes typing {

    0%,
    80%,
    100% {
        transform: scale(0.8);
        opacity: 0.5;
    }

    40% {
        transform: scale(1.2);
        opacity: 1;
    }
}

@keyframes blink {

    0%,
    50% {
        opacity: 1;
    }

    51%,
    100% {
        opacity: 0;
    }
}

.streaming-cursor {
    display: inline-block;
    width: 2rpx;
    height: 1em;
    background-color: #333;
    margin-left: 4rpx;
    animation: blink 1s infinite;
}

.ai-markdown-content {
    width: 100%;
    max-width: 100%;
    font-size: 28rpx;
    line-height: 1.6;
    color: #333;
    word-wrap: break-word;
    overflow-wrap: break-word;
    box-sizing: border-box;

    /* 标题样式 */
    ::v-deep h1,
    ::v-deep h2,
    ::v-deep h3,
    ::v-deep h4,
    ::v-deep h5,
    ::v-deep h6 {
        font-weight: 600;
        margin: 16rpx 0 12rpx 0;
        color: #1f2328;
    }

    ::v-deep h1 {
        font-size: 36rpx;
    }

    ::v-deep h2 {
        font-size: 32rpx;
    }

    ::v-deep h3 {
        font-size: 30rpx;
    }

    ::v-deep h4 {
        font-size: 28rpx;
    }

    /* 段落样式 */
    ::v-deep p {
        margin: 12rpx 0;
        line-height: 1.6;
    }

    /* 列表样式 */
    ::v-deep ul,
    ::v-deep ol {
        margin: 12rpx 0;
        padding-left: 30rpx;
    }

    ::v-deep li {
        margin: 6rpx 0;
        line-height: 1.5;
    }

    /* 强调样式 */
    ::v-deep strong {
        font-weight: 600;
        color: #1f2328;
    }

    ::v-deep em {
        font-style: italic;
    }

    /* 代码样式 */
    ::v-deep code {
        background-color: #f6f8fa;
        border: 1px solid #d1d9e0;
        border-radius: 6rpx;
        font-family: 'SF Mono', Monaco, Inconsolata, 'Roboto Mono', Consolas, 'Courier New', monospace;
        font-size: 85%;
        padding: 2rpx 6rpx;
        color: #1f2328;
        word-break: break-all;
        overflow-wrap: break-word;
    }

    ::v-deep pre {
        background-color: #f6f8fa;
        border: 1px solid #d1d9e0;
        border-radius: 12rpx;
        margin: 16rpx 0;
        padding: 16rpx;
        overflow-x: auto;
        overflow-y: hidden;
        font-size: 24rpx;
        max-width: 100%;
        box-sizing: border-box;
    }

    ::v-deep pre code {
        background: none;
        border: none;
        padding: 0;
        font-size: inherit;
        word-break: normal;
        white-space: pre;
        overflow-wrap: normal;
    }

    /* 引用样式 */
    ::v-deep blockquote {
        border-left: 6rpx solid #d1d9e0;
        margin: 16rpx 0;
        padding: 0 24rpx;
        color: #636c76;
        background-color: #f8f9fa;
        border-radius: 0 8rpx 8rpx 0;
    }

    /* 链接样式 */
    ::v-deep a {
        color: #0969da;
        text-decoration: none;
        word-break: break-all;
        overflow-wrap: break-word;
    }

    /* 长文本和URL处理 */
    ::v-deep p {
        margin: 12rpx 0;
        line-height: 1.6;
        word-wrap: break-word;
        overflow-wrap: break-word;
        word-break: break-word;
    }

    /* 列表项文本换行 */
    ::v-deep li {
        margin: 6rpx 0;
        line-height: 1.5;
        word-wrap: break-word;
        overflow-wrap: break-word;
    }

    /* 水平线样式 */
    ::v-deep hr {
        border: none;
        border-top: 2rpx solid #d1d9e0;
        margin: 24rpx 0;
    }
    ::v-deep hr {
        border: none;
        border-top: 2rpx solid #d1d9e0;
        margin: 24rpx 0;
    }

    /* 表格样式 */
    ::v-deep table {
        border-collapse: collapse;
        margin: 16rpx 0;
        width: 100%;
        max-width: 100%;
        overflow-x: auto;
        display: block;
        white-space: nowrap;
        box-sizing: border-box;
    }

    /* 创建表格容器来处理横向滚动 */
    ::v-deep .table-container {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        margin: 16rpx 0;
    }

    ::v-deep thead,
    ::v-deep tbody,
    ::v-deep tr {
        display: table;
        width: 100%;
        table-layout: fixed;
    }

    ::v-deep th,
    ::v-deep td {
        border: 1px solid #d1d9e0;
        padding: 12rpx 16rpx;
        text-align: left;
        word-wrap: break-word;
        overflow-wrap: break-word;
        max-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        min-width: 60rpx; /* 最小列宽 */
    }

    ::v-deep th {
        background-color: #f6f8fa;
        font-weight: 600;
    }
}

.quick-suggestions {
    padding: 20rpx 0;
    background-color: #fff;
    border-top: 2rpx solid #f0f0f0;
}

.suggestions-scroll {
    height: 80rpx;
}

.suggestion-list {
    display: flex;
    padding: 0 30rpx;
    gap: 20rpx;
}

.suggestion-item {
    flex-shrink: 0;
    background-color: #f6f8ff;
    border: 2rpx solid #d9e5ff;
    border-radius: 30rpx;
    padding: 16rpx 24rpx;
    font-size: 26rpx;
    color: #1890ff;
    transition: all 0.3s;

    &:active {
        background-color: #e6f4ff;
        transform: scale(0.95);
    }
}

.input-area {
    background-color: #fff;
    border-top: 2rpx solid #f0f0f0;
    padding: 20rpx 30rpx;
    padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
}

.input-container {
    display: flex;
    align-items: center;
    background-color: #f8f8f8;
    border-radius: 25rpx;
    padding: 16rpx 20rpx;
    border: 2rpx solid #e8e8e8;
}

.message-input {
    flex: 1;
    font-size: 28rpx;
    color: #333;
    background-color: transparent;
    border: none;
    outline: none;
    margin-right: 20rpx;
}

.send-btn {
    width: 60rpx;
    height: 60rpx;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #e8e8e8;
    transition: all 0.3s;

    &.active {
        background-color: #1890ff;
    }

    &:active {
        transform: scale(0.9);
    }

    image {
        width: 32rpx;
        height: 32rpx;
    }
}
</style>
